import React from 'react';
import { Swiper } from 'antd-mobile';
import './Banner.scss';

interface BannerItem {
  id: number;
  title: string;
  subtitle: string;
  image: string;
  bgColor: string;
}

const Banner: React.FC = () => {
  const bannerData: BannerItem[] = [
    {
      id: 1,
      title: '让体检更简单',
      subtitle: '专业医疗团队为您服务',
      image: '/api/placeholder/300/150',
      bgColor: '#e8f4fd'
    },
    {
      id: 2,
      title: '在线问诊',
      subtitle: '足不出户看名医',
      image: '/api/placeholder/300/150',
      bgColor: '#f0f9ff'
    },
    {
      id: 3,
      title: '健康管理',
      subtitle: '科学管理您的健康',
      image: '/api/placeholder/300/150',
      bgColor: '#f0fdf4'
    }
  ];

  return (
    <div className="banner-section">
      <Swiper
        autoplay
        loop
        indicator={(current) => (
          <div className="custom-indicator">
            {bannerData.map((_, index) => (
              <span
                key={index}
                className={`indicator-dot ${index === current ? 'active' : ''}`}
              />
            ))}
          </div>
        )}
        className="banner-swiper"
      >
        {bannerData.map((item) => (
          <Swiper.Item key={item.id}>
            <div 
              className="banner-item"
              style={{ backgroundColor: item.bgColor }}
            >
              <div className="banner-content">
                <div className="banner-text">
                  <h3 className="banner-title">{item.title}</h3>
                  <p className="banner-subtitle">{item.subtitle}</p>
                </div>
                <div className="banner-image">
                  <div className="image-placeholder">
                    <span className="doctor-icon">👨‍⚕️</span>
                  </div>
                </div>
              </div>
            </div>
          </Swiper.Item>
        ))}
      </Swiper>
    </div>
  );
};

export default Banner;
